<template>
  <div class="edit-popup">
    <!-- editPopUp2 修改 -->
    <div class="threshold-value-main-form">
      <el-form ref="form" :rules="rules" :inline="true" :model="form" label-width="1.5rem">
        <el-row>
          <el-col :span="10" :offset="1">
            <el-form-item label="变电站名称：">
              <el-select v-model="form.stationName" filterable size="small" placeholder disabled>
                <el-option
                  v-for="item in stationName_options"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="1">
            <el-form-item label="区域：">
              <el-select v-model="form.areaName" filterable size="small" placeholder disabled>
                <el-option
                  v-for="item in areaName_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="1">
            <el-form-item label="点位类型：">
              <el-select v-model="form.proTypeName" filterable size="small" placeholder disabled>
                <el-option
                  v-for="item in proTypeName_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="1">
            <el-form-item label="点位名称：">
              <el-input v-model="form.pointerName" placeholder disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="1">
            <el-form-item label="告警值下限：" prop="alarmLower">
              <el-input v-model="form.alarmLower" placeholder></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="1">
            <el-form-item label="告警值上限：" prop="alarmUpper">
              <el-input v-model="form.alarmUpper" placeholder></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="1">
            <el-form-item label="注意值下限：" prop="lowerLimit">
              <el-input v-model="form.lowerLimit" placeholder></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="1">
            <el-form-item label="注意值上限：" prop="upperLimit">
              <el-input v-model="form.upperLimit" placeholder></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="10" :offset="1">
            <el-form-item label="告警方式：" prop="alarmType">
              <el-select v-model="form.alarmType" size="small" placeholder="请选择" clearable>
                <el-option
                  v-for="item in alarmType_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="1">
            <el-form-item label="是否弹窗：">
              <el-select v-model="form.openModel" size="small" placeholder="请选择" clearable>
                <el-option
                  v-for="item in openModel_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="1">
            <el-form-item label="是否推送：">
              <el-select v-model="form.isPush" size="small" placeholder="请选择" clearable>
                <el-option
                  v-for="item in isPush_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <div class="centerbox">
              <el-button type="primary" @click="handleEdit">修改</el-button>
              <el-button type="primary" @click="handleClose">取消</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { publicAPIModule } from "@/store/modules/public";
interface optionList {
  value: string;
  label: string;
}
@Component
export default class extends Vue {
  @Prop() datas!: any;
  // 表单
  public form: any = {
    stationName: "",
    areaName: "",
    proTypeName: "",
    pointerName: "",
    alarmLower: "",
    alarmUpper: "",
    lowerLimit: "",
    upperLimit: "",
    alarmType: "",
    openModel: "",
    isPush: "",
  };
  rules = {
    // alarmLower: [{ required: true, message: "请输入内容", trigger: "blur" }],
    // area: [{ required: true, message: "请输入内容", trigger: "blur" }],
    // pointType: [{ required: true, message: "请输入内容", trigger: "blur" }],
    // deviceId: [{ required: true, message: "请输入内容", trigger: "blur" }],
  };
  // 告警方式
  alarmType_options: Array<optionList> = [
    {
      value: "0",
      label: "注意告警",
    },
    {
      value: "1",
      label: "越限告警",
    },
    {
      value: "2",
      label: "变位告警",
    },
    {
      value: "3",
      label: "闭合告警",
    },
    {
      value: "4",
      label: "断开告警",
    },
    {
      value: "5",
      label: "正常",
    },
  ];
  openModel_options: Array<optionList> = [
    {
      value: "1",
      label: "是",
    },
    {
      value: "2",
      label: "否",
    },
  ];
  isPush_options: Array<optionList> = [
    {
      value: "1",
      label: "是",
    },
    {
      value: "2",
      label: "否",
    },
  ];
  get stationName_options() {
    return publicAPIModule.stationList;
  }
  get areaName_options() {
    return publicAPIModule.getAreaDictList;
  }
  get proTypeName_options() {
    return publicAPIModule.pointerTypeList;
  }

  mounted() {
    var forms = {
      stationName: this.datas.stationName||'',
      areaName: this.datas.areaName||'',
      proTypeName: this.datas.proTypeName||'',
      pointerName: this.datas.name||'',

      alarmLower: this.datas.alarmLower||'',
      alarmUpper: this.datas.alarmUpper||'',
      lowerLimit: this.datas.lowerLimit||'',
      upperLimit: this.datas.upperLimit||'',
      alarmType: this.datas.alarmType||'',
      openModel: this.datas.openModel||'',
      isPush: this.datas.isPush||'',
    };
    this.form = forms;
  }
  handleEdit() {
    var form = [
      {
        alarmLower: this.form.alarmLower || "",
        alarmUpper: this.form.alarmUpper || "",
        lowerLimit: this.form.lowerLimit || "",
        upperLimit: this.form.upperLimit || "",
        alarmType: this.form.alarmType || "",
        openModel: this.form.openModel || "",
        isPush: this.form.isPush || "",
        id: this.datas.id,
        alarmTemplate: this.datas.alarmTemplate||''
      },
    ];

    this.$emit("handleEdit", form);
  }
  handleClose() {
    this.$emit("handleClose");
  }
}
</script>

<style lang="scss" scoped>
</style>
<style lang="scss">
.edit-popup {
  .el-form-item__content {
    width: calc(100% - 1.5rem);
  }
  .el-button--primary {
    width: 1.1rem;
  }
  .el-form-item {
    margin-bottom: 0.38rem;
  }
}
</style>
